/**
 * @author byte_su@163.com
 * @desc 暂时引用react-router-transition,更灵活\强大动画可以用react-motion
 * @date 2017-01-21
 */
import {RouteTransition} from "react-router-transition";
// import React from 'react';
// import React1 from 'react/lib/ReactWithAddons';

// var ReactCSSTransitionGroup = React1.addons.CSSTransitionGroup;

import {connect} from "react-redux";
import NavBottom from "../components/NavBottom";
import Header from "../components/Header";
import {Config, Fetch} from '../libs/';
import {Url} from '../libs/Url';
import {PAGE_SUBJECT} from '../stores/subject';
import {update_current_nav_item, clientInfoSet} from '../stores/action';
// import slider from '../libs/slider';
import BannerAnim, {Element} from 'rc-banner-anim';
import TweenOne from 'rc-tween-one';
import 'rc-banner-anim/assets/index.css';
import '../less/test.less';
import Home from "./Home/";
import Class from "./Class/";
import Activity from "./Activity/";
import News from "./News/";
import Notice from "./Notice/";
import TodayTeach from "./TodayTeach/";
import Homework from "./Homework/";
import Duty from "./Duty/";
import Schedule from "./Schedule/";
import {parseSearch} from '../libs/utils';
const BgElement = Element.BgElement;


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {height: window.innerHeight, current: 0, playSpeed: 3000};
        this._handleResize = this._handleResize.bind(this);
        this.timer_ = this.timer_.bind(this);
        this.goTo = this.goTo.bind(this);
    }

    componentDidMount() {
        const self = this;
        window.addEventListener('resize', this._handleResize);

        document.body.addEventListener('touchmove', (ev) => {
            ev.preventDefault();
        });

    }


    componentWillMount() {
        const {dispatch} = this.props;
        let clientInfo = parseSearch();
        if (clientInfo && clientInfo.clientid) {
            Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                .then((res)=> {
                    if (res['class'] && res['class'].classid) {
                        clientInfo['class'] = res['class'];
                        clientInfo['school'] = res['school'];
                        clientInfo['device'] = res['device'];
                        clientInfo['classroom'] = res['classroom'];
                        dispatch(clientInfoSet(clientInfo));
                    } else {
                        alert('设备码没有跟班级对应，请核验!')
                    }
                })
                .catch(e=> {
                    console.log(e)
                })
        } else {
            alert('设备码不合法，请核验!')
        }

    }

    componentWillUnmount() {
        window.removeEventListener('resize', this._handleResize);
    }

    componentWillReceiveProps() {
    }

    _handleResize() {
        this.setState(Object.assign({}, this.state, {height: window.innerHeight}));
    }

    timer_() {
        const self = this;
        if (this._timer_) {
            clearInterval(self._timer_);
        }
        return;
        self._timer_ = setInterval(()=> {
            if (self.refs.screen) {
                var t = self.refs.screen.next();
            }
        }, self.state.playSpeed);
    }

    goTo(number) {
        const self = this;
        self.setState({bottom: 0});
        self.refs.screen && self.refs.screen.slickGoTo(number);
        //this.timer_(); //todo 定时器调试关闭
    }

    render() {
        const {dispatch} = this.props, self = this, state = this.state;
        return (
            <div style={{background: 'url(' + require('./../imgs/bg.jpg') + ')'}}>
                <div id="main-container"
                     className={'main-container'}>
                    <div
                        className="main"
                        style={{
                            height: this.state.height
                        }}>
                        <Header
                            {...this.props.clientInfo}
                        />
                        <div key="amdox-animation">
                            <BannerAnim
                                initShow={0}
                                ref="screen"
                                prefixCls="screen-single"
                                type="acrossOverlay"
                                autoPlaySpeed={state.playSpeed}
                                onChange={(current, number)=> {
                                    self.refs.bottom.setState({current: number})

                                }}
                                thumb={false}
                                arrow={false}
                                onClick={()=> {
                                    //this.timer_(); //todo 定时器注释
                                }}
                                style={{height: window.innerHeight - 180 - 120}}>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="0"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <Home />
                                    </BgElement>

                                </Element>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="1"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <Class />
                                    </BgElement>

                                </Element>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="2"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <News />
                                    </BgElement>
                                </Element>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="3"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <Activity />
                                    </BgElement>
                                </Element>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="4"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <Notice />
                                    </BgElement>
                                </Element>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="5"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <TodayTeach />
                                    </BgElement>
                                </Element>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="6"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <Homework />
                                    </BgElement>
                                </Element>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="7"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <Duty />
                                    </BgElement>
                                </Element>
                                <Element
                                    prefixCls="screen-single-elem"
                                    key="8"
                                >
                                    <BgElement
                                        key="bg"
                                        className="bg"
                                    >
                                        <Schedule />
                                    </BgElement>
                                </Element>
                            </BannerAnim>
                        </div>
                        <NavBottom
                            ref="bottom"
                            onClick={(current)=> {
                                self.goTo(current + 1)
                            }}/>
                    </div>
                </div>
            </div>
        )
    }
}

// Which props do we want to inject, given the global state?
// Note: use https://github.com/faassen/reselect for better performance.
function select(state) {
    return {
        [PAGE_SUBJECT._GLOBAL]: state.pageBySubject[PAGE_SUBJECT._GLOBAL],
        clientInfo: state.clientInfo
    }
}

// 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；
export default connect(select)(App)